<!DOCTYPE html>
<html  style="overflow : hidden; ">
<head>
    <title>要素拾取</title>
    <meta name="keywords" content="矢量瓦片,矢量索引">
    <meta name="description" content="矢量瓦片">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../sdk_web/LeafletSDK_es6/css/leaflet.css" />

    <script src="../sdk_web/LeafletSDK_es6/dist/leaflet-src.js"></script>
    <script src="../sdk_web/LeafletSDK_es6/dist/leaflet.js"></script>
    <script src="../sdk_web/LeafletSDK_es6/dist/CustomWebSDK.min.js"></script> 
    <script src="../libs/jquery-1.12.3.min.js"></script>

</head>

<body onload="init()"  style="margin : 0; ">
<div id="map" class="map" style ="position:absolute;bottom:0px;top:0px;width:100%"></div>


<script>
    function init(){
        var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:120.15, lat:30.268},maxZoom: 21,zoom:18,inertiaDeceleration:15000,inertiaThreshold:2000});

        //添加底图
        var layer = new L.GXYZ('http://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017',{tileSize:512,maxZoom: 21,keepBuffer:0,updateWhenZooming:false});
        map.addLayer(layer);

        //添加注记图层
        var labelLayer = new L.GLabelGrid('http://ditu.zjzwfw.gov.cn/mapserver/label/zjvmap/getAvoidData?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017',{tileSize:512,hitDetection:true,keepBuffer:0,updateWhenZooming:false});
        
        map.addLayer(labelLayer);

        map.on('click', function(e) {
            // console.log(map.getCenter());
            // var latlng =e.latlng;
            // var event = e.originalEvent;
            //拾取要素
            // var features = layer.getFeatureByXY(event.x,event.y,function(layerFeatures){
            //     //高亮
            //     delete layerFeatures['政区境界_行政区划面'];
            //     layer.highlightFeatures(layerFeatures,{color:"#ff00ff",opacity:0.4})
            // });



            // var event = e.originalEvent;
            // var feature =  labelLayer.getFeatureByXY(event.x,event.y);
            // if(feature){
            //     var options = {
            //         maxWidth:200,
            //         maxHeight:50,
            //         autoClose:true,
            //         closeButton:true,//是否使用popup的关闭按钮
            //         offset:[0,0]//设置偏移量，适用于自定义popup
            //     };
            //     var popup =  L.popup(options)
            //         .setLatLng(e.latlng)
            //         .setContent('<div>'+feature.label+'</div>')
            //         .openOn(map);
            // }

        });
    }

</script>

</body>
</html>